<template>
  <div ref="dom" class="charts chart-bar" style="width:100%;height:calc(100% - 30px)"></div>
</template>
<script>
import echarts from 'echarts'
import tdTheme from './theme.json'
import {off, on} from '@/libs/tools'

echarts.registerTheme('tdTheme', tdTheme)
export default {
  name: 'ChartBar',
  props: {
    value: Object,
    colorA: Array
  },
  data() {
    return {
      dom: null
    }
  },
  methods: {
    resize() {
      this.dom.resize()
    }
  },
  mounted() {
    this.$nextTick(() => {
      let _this = this;
      let xAxisData = Object.keys(this.value)
      let seriesData = Object.values(this.value)
      let option = {
        grid: {
          top: 2,
          bottom: 10,
          left: 50,
          right: 60
        },
        xAxis: {
          show: false,
          type: 'value',
          inverse: true,
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          }
        },
        yAxis: [{
          type: 'category',
          position: 'right',
          inverse: true,
          axisLabel: {
            show: true,
            textStyle: {
              color: '#333'
            }
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          data: xAxisData
        }, {
          type: 'category',
          inverse: true,
          axisTick: 'none',
          axisLine: 'none',
          show: true,
          axisLabel: {
            textStyle: {
              color: '#333',
              fontSize: '12'
            },
            formatter: function (value) {
              return value;
            }
          },
          data: seriesData
        }],
        series: [{
          name: '数据',
          type: 'bar',
          position: 'right',
          zlevel: 1,
          itemStyle: {
            normal: {
              barBorderRadius: 3,
              color: '#50b5ed'
            }
          },
          barWidth: 6,
          data: seriesData
        },
          {
            name: '背景',
            position: 'right',
            type: 'bar',
            barWidth: 6,
            barGap: '-100%',
            data: [100, 100, 100, 100, 100],
            itemStyle: {
              normal: {
                color: '#ddf1fc',
                barBorderRadius: 3
              }
            }
          }
        ]
      }
      if (this.colorA && this.colorA.length) {
        option.series[0].itemStyle = {
          normal: {
            color: function (params) {
              var colorList = _this.colorA;
              return colorList[params.dataIndex]
            }
          }
        }
      }
      this.dom = echarts.init(this.$refs.dom, 'tdTheme')
      this.dom.setOption(option)
      on(window, 'resize', this.resize)
    })
  },
  beforeDestroy() {
    off(window, 'resize', this.resize)
  }
}
</script>
